<template>
  <div class="sm-sman-sortingManagement">
    <!-- <TopSearch ref="topSm" >
      <slot>
        <li>
          <el-button size="mini" type="primary" @click="hcxComeBtn">缓存箱出库</el-button>
        </li>
        <li>
          <el-button size="mini" type="primary" @click="hcxScan">缓存箱扫码</el-button>
        </li>
        <li>
          <el-button size="mini" type="primary" @click="gzbComeBtn">工作包出库</el-button>
        </li>
        <li>
          <el-button size="mini" type="primary" @click="gzbScan">工作包扫码</el-button>
        </li>
        <li>
          <el-button size="mini" type="success" @click="hcxBoxBackBtn">缓存箱回库</el-button>
        </li>
        <li>
          <el-button size="mini" type="success" @click="gzbBackBtn">工作包回库</el-button>
        </li>
        <li>
          <el-button size="mini" type="success" @click="baocun">分拣保存</el-button>
        </li>
        <li>
          <p>
            缓存箱条码：<span>{{hcxTM}}</span>
          </p>
          <p>
            工作包条码：<span>{{gzbTM}}</span>
          </p>
          <p>
            AO条码：<span>{{aoNumber}}</span>
          </p>
        </li>
      </slot>
    </TopSearch>
    <ShowData style="margin-top:15px"></ShowData> -->
    <!-- <SortTable></SortTable> -->
    <TableTitle>
      <slot>
        <p>操作按钮</p>
      </slot>
    </TableTitle>
    <div style="margin-top:5px">
      <el-button size="mini" type="primary" @click="openChangeGzgp">故障改派</el-button>
    </div>
    <div class="changeGzBox" v-if="isChangeGzBtn">
      <div class="changeGzBoxClose">
          <span @click="isChangeGzBtn = false">x</span>
      </div>
      <div style="width:96%;margin-top:35px;margin-left:2%">
        <TableTitle>
          <slot>
            <p>
              查询条件
            </p>
          </slot>
        </TableTitle>
        <sortSearch ref="partSearchContainer"></sortSearch>
        <TableTitle>
          <slot>
            <p>工作包分拣任务列表</p>
          </slot>
        </TableTitle>
        <div style="text-align:center">
            <el-table
              ref="smStTopTable"
              size="mini"
              :data="resData"
              style="width: 100%"
              height="220"
              highlight-current-row
              @selection-change="handleSelectionChange"
              >
              <el-table-column type="selection" width="40"> </el-table-column>
              <el-table-column type="index" label="序号" width="50"> </el-table-column>
              <el-table-column prop="productCode" label="机型" width="110" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="batchNo" label="批次" :show-overflow-tooltip="true" > </el-table-column>
              <el-table-column prop="startPlaneNo" label="起始架次" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="endPlaneNo" label="结束架次" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="packageCode" label="工作包编号" width="150" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="packageName" label="工作包名称" width="150"  :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="requiredTime" label="要求时间" width="150" :show-overflow-tooltip="true"> </el-table-column>
              <el-table-column prop="remark" label="备注" :show-overflow-tooltip="true"> </el-table-column>
          </el-table>
              <!-- 分页 -->
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageNumber"
              :page-sizes="[10,20,50,100]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount">
          </el-pagination>
        </div>
        <TableTitle>
          <slot>
            <p>操作按钮</p>
          </slot>
        </TableTitle>
        <div style="margin-top:5px">
          <el-select size="mini" v-model="taskPackages" placeholder="请选择" style="margin-right:5px">
              <el-option
                  v-for="item in taskPackagesList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.label"
              >
              </el-option>
          </el-select>
          <el-button size="mini" type="primary"  @click="changeGzBtn">故障改派</el-button>
        </div>
      </div>

    </div>
    <div class="tbox">
      <div class="tbox-left">
        <TableTitle style="margin-top:10px">
          <slot>
            <p>工作包分拣任务列表</p>
          </slot>
        </TableTitle>
        <TopLeftTable></TopLeftTable>
      </div>
      <div class="tbox-right">
        <TableTitle style="margin-top:10px">
          <slot>
            <p>AO分拣任务列表</p>
          </slot>
        </TableTitle>
        <TopTable></TopTable>
      </div>
    </div>
    <TableTitle>
      <slot>
        <p>AO物料配套清单</p>
      </slot>
    </TableTitle>
    <MidTable></MidTable>
    <!-- <LastGoods></LastGoods> -->
  </div>
</template>
<script>
// import TopSearch from "../../../../components/TopSearch.vue";
// import ShowData from "./components/TopData.vue"
// import LastGoods from "./components/LastGoods.vue"
import TopTable from "./components/TopTable.vue";
import TopLeftTable from './components/TopLeftTable.vue';
import MidTable from "./components/MidTable.vue";
import TableTitle from "../../../../components/TableTitle.vue";
import SortTable from "./components/SortTable.vue";
import sortSearch from "./components/sortSearch.vue";
// import { smSmanHcxScan,smSmanGzbScan,putToolPackage,smSmanCsHcxOut,smSmanCsHcxBack,workBoxSmOut,workBoxSmBack } from "@/utils/api.js"
import { supportingTaskTop,smSmanGzgpList,smSmanGzgp } from "@/utils/api.js"
export default {
  name: "SortingManagement",
  components: {
    // TopSearch,
    // ShowData,
    // LastGoods,
    TopTable,
    TopLeftTable,
    MidTable,
    TableTitle,
    SortTable,
    sortSearch,
  },
  data(){
    return{
      isChangeGzBtn:false,
      // 弹窗表格
      // 当前页数
      pageNumber: 1,
      // 数据总个数
      totalCount: 0,
      // 返回的数据数组
      resData: [],
      // 每页数据个数
      pageSize: 20,
      pageSize: 20,
      indexTm:'',
      hcxTM:'',
      hcxBackTm:'',
      gzbTM:'',
      gzbBackTm:'',
      aoNumber:'',
      gzbListInfo:'',
      hcxBoxBack:'',
      hcxBoxCome:[],
      // gzbBack:'',
      gzbCome:[],
      marterialResult:[],
      taskPackages:'',
      taskPackagesList:[],
      tcListData:[],
    }
  },
  methods:{
    // 统一扫码判断接口方法
    scanning(){
      if(this.indexTm.length == 12){
        let indexTmList = [...this.indexTm]
        if(indexTmList[0] == 1){
          // 缓存箱扫码
          this.$options.methods.hcxScan.bind(this)()
        }else if(indexTmList[0] == 2){
          // 工作包扫码
          this.$options.methods.gzbScan.bind(this)()
        }
      //   // 缓存箱扫码
      //   this.$options.methods.hcxScan.bind(this)()
      // }else if(this.indexTm.length == 11){
      //   // 工作包扫码
      //   this.$options.methods.gzbScan.bind(this)()
      }else if(this.indexTm.length == 5){
        // 缓存箱出库 工作包出库
        this.$options.methods.hcxComeBtn.bind(this)(this.indexTm)
        this.$options.methods.gzbComeBtn.bind(this)(this.indexTm)
      }else if(this.indexTm == 9002){
        // 缓存箱回库
        this.$options.methods.hcxBoxBackBtn.bind(this)()
      }else if(this.indexTm == 9004){
        // 工作包回库
        this.$options.methods.gzbBackBtn.bind(this)()
      }else if(this.indexTm == 9005){
        // 分拣保存
        this.$options.methods.baocun.bind(this)()
      }else if(this.indexTm.length == 4){
        // this.$bus.$emit('mrMwMaterialListSend',this.indexTm)
        for(let mn=0;mn<this.marterialResult.length;mn++){
          if(this.indexTm == this.marterialResult[mn].barcode){
            this.$bus.$emit('smSmanMaterialNumber',mn)
          }
        }
        this.$Alert({
            title: "成功",
            message: this.indexTm + '物料确认成功！',
            type: "success",
          })
      }
      else {
        this.$Alert({
            title: "失败",
            message: '条码有误！',
            type: "error",
          })
      }
    },
    // 缓存箱出库 -----更换对的接口就行 格式已经写好
    hcxComeBtn(tiaoma){
      smSmanCsHcxOut({
          // msTaskAoIds:this.hcxBoxCome
          aoBarcode:this.indexTm
        }).then((res)=>{
          console.log('缓存箱出库',res)
          if(res.data.retCode == 200){
            this.$Alert({
              title: "成功",
              message: '缓存箱出库命令已下发！',
              type: "success",
            });
            this.aoNumber = tiaoma
            // 出库成功聚焦条码框 并清空
            this.$refs.topSm.makeTmNull()
            this.$refs.topSm.openScan()
          }else {
            this.$Alert({
              title: "失败",
              message: '无法下发缓存箱出库命令！',
              type: "error",
            });
          }
        })
    },
    // 缓存箱扫码
    hcxScan(){
      smSmanHcxScan({
        workbinCode:this.indexTm
      }).then((res)=>{
        console.log('缓存箱扫码',res)
        if(res.data.retCode == 200) {
          this.hcxTM = this.indexTm
          this.$Alert({
              title: "成功",
              message: res.data.message,
              type: "success",
            });
          // 拿到数据传给底部框
          this.marterialResult = res.data.responseBody
          this.$bus.$emit('smsmnSendHcxInfos',res.data.responseBody)
          document.querySelector('.sm-sman-rightInfo').style.display = 'inline'
          // 缓存箱扫码成功清空条码框并聚焦
            this.$refs.topSm.makeTmNull()
            this.$refs.topSm.openScan()
        }else {
          this.$Alert({
              title: "失败",
              message: res.data.message,
              type: "error",
            });
        }
      })
    },
    // 缓存箱回库
    hcxBoxBackBtn(){
      this.hcxBackTm = this.hcxTM
      smSmanCsHcxBack({
          workbinCode:this.hcxBackTm
        }).then((res)=>{
          console.log('缓存箱回库',res)
          if(res.data.retCode == 200){
            this.$Alert({
              title: "成功",
              message: '缓存箱回库命令已下发！',
              type: "success",
            });
            document.querySelector('.sm-sman-rightInfo').style.display = 'none'
            this.hcxTM = ''
            // 回库成功清空条码框并聚焦
            this.$refs.topSm.makeTmNull()
            this.$refs.topSm.openScan()
          }else {
            this.$Alert({
              title: "失败",
              message: '无法下发缓存箱回库命令！',
              type: "error",
            });
          }
        })
    },
    // 工作包出库  
    gzbComeBtn(tiaoma){
      workBoxSmOut({
        agv:'',
        // msTaskAoIds:this.gzbCome
        aoBarcode:this.indexTm
      }).then((res)=>{
        console.log('工作包出库',res)
        if(res.data.retCode == 200){
          this.aoNumber = tiaoma
          this.$Alert({
            title: "成功",
            message: '工作包出库命令已下发！',
            type: "success",
          });
          // 出库成功聚焦条码框 并清空
          this.$refs.topSm.makeTmNull()
          this.$refs.topSm.openScan()
        }else {
          this.$Alert({
            title: "失败",
            message: '无法下发工作包出库命令！',
            type: "error",
          });
        }
      })
    },
    // 工作包扫码
    gzbScan(){
      smSmanGzbScan({
        toolCode:this.indexTm,
      }).then((res)=>{
        console.log('工作包扫码',res)
        if(res.data.retCode == 200) {
          this.$bus.$emit('smsmnSendGzbInfo',res.data.responseBody)
          this.$Alert({
            title: "成功",
            message: res.data.message,
            type: "success",
          });
          // 拿到数据传给底部框
          document.querySelector('.sm-sman-leftInfo').style.display = 'inline'
          this.gzbTM = this.indexTm
          // 缓存箱扫码成功清空条码框并聚焦
            this.$refs.topSm.makeTmNull()
            this.$refs.topSm.openScan()
        }else {
          this.$Alert({
            title: "失败",
            message: res.data.message,
            type: "error",
          });
        }
      })
    },
    // 工作包回库
    gzbBackBtn(){
      this.gzbBackTm = this.gzbTM
      workBoxSmBack({
          palletCode:this.gzbBackTm
        }).then((res)=>{
          console.log('工作包回库',res)
          if(res.data.retCode == 200){
            this.$Alert({
              title: "成功",
              message: '工作包回库命令已下发！',
              type: "success",
            });
            document.querySelector('.sm-sman-leftInfo').style.display = 'none'
            this.gzbTM = ''
            // 回库成功清空条码框并聚焦
            this.$refs.topSm.makeTmNull()
            this.$refs.topSm.openScan()
          }else {
            this.$Alert({
              title: "失败",
              message: '无法下发工作包回库命令！',
              type: "error",
            });
          }
        })
    },
    // 分拣保存
    baocun(){
      putToolPackage({
        toolCode:this.gzbTM,
        materialDTOs:this.gzbListInfo
      }).then((res)=>{
        console.log('保存',res)
        if(res.data.retCode == 200) {
          this.$Alert({
            title: "成功",
            message: '保存成功',
            type: "success",
          });
          // 回库成功清空条码框并聚焦
          this.$refs.topSm.makeTmNull()
          this.$refs.topSm.openScan()
        }else {
          this.$Alert({
            title: "失败",
            message: '保存失败',
            type: "error",
          });
        }
         
      })
    },
    // 弹窗
    // Table勾选函数
    handleSelectionChange(val){
      // 故障改派所需data
      this.tcListData = []
      for(let d=0;d<val.length;d++){
        this.tcListData.push(val[d].msTaskPackageId)
      }
      console.log(123123,val)
    },
    // 分页---每页数据条数---传给TopSearch
    handleSizeChange(val){
        this.pageSize = val;
        this.$options.methods.searchData.bind(this)()
    },
    // 分页---页数---传给TopSearch
    handleCurrentChange(val) {
        this.pageNumber = val;
        this.$options.methods.searchData.bind(this)()
    },
    searchData(){
        supportingTaskTop({
            pageParameter: {
            rows: this.pageSize,
            page: this.pageNumber,
            },
        }).then((res) => {
            console.log('弹窗Top表格',res)
            this.resData = res.data.responseBody.result;
            this.totalCount = res.data.responseBody.pageParameter.totalCount;
        });
    },
    // 打开故障改派弹窗
    openChangeGzgp(){
      this.isChangeGzBtn = true
      this.$options.methods.searchData.bind(this)()
    },
    // 故障改派函数
    changeGzBtn(){
      smSmanGzgp({
        taskPackages:this.tcListData,
        CONSOLENAME:this.taskPackages
      }).then((res)=>{
        console.log('故障改派',res)
        if(res.data.retCode == 200) {
          this.$Alert({
            title: "成功",
            message: '保存成功',
            type: "success",
          });
          // 下拉框清空
          this.taskPackages = ''
          // 更新Table
          this.$options.methods.searchData.bind(this)()
          this.$bus.$emit('sortManDoGzbsmData','reTable')
        }else {
          this.$Alert({
            title: "失败",
            message: '保存失败',
            type: "error",
          });
        }
      })
    },
  },
  mounted(){
    // 获取下拉列表
    smSmanGzgpList({

    }).then((res)=>{
      console.log('下拉列表',res)
      for(let t=0;t<res.data.responseBody.length;t++){
        let tlist = {value:t+1,label:res.data.responseBody[t]}
        // console.log(tlist)
        this.taskPackagesList.push(tlist) 
      }
        
      // console.log(this.taskPackagesList)
    })

    this.$bus.$on('saoma',(e)=>{
      this.indexTm = e
    })
    this.$bus.$on('gzbListInfoss',(e)=>{
      // 回库成功清空条码框并聚焦
      this.$refs.topSm.makeTmNull()
      this.$refs.topSm.openScan()
    })
    // 接收首页 gzb出库 hcx入库 
    this.$bus.$on('smSmanGzbInfo',(e)=>{
      // this.gzbBack = e
      // 批量工作包出库
      this.gzbCome = []
      this.hcxBoxCome = []
      for(let p=0;p<e.length;p++) {
        this.gzbCome.push(e[p].msTaskAoId)
        this.hcxBoxCome.push(e[p].msTaskAoId)
      }
      // console.log(this.gzbCome)
    })
    this.$bus.$on('smSmanListSave',(e)=>{
      this.gzbListInfo = e
    })
    this.$bus.$on('prSearchInfo',(e)=>{
      this.resData = e
    })
  }

};
</script>
<style scoped>
.el-button--success {
  background: #29bacd;
  border-color: #29bacd;
}
.el-button--success:hover {
  background: #23abbd;
  border-color: #23abbd;
}
.tbox {
  width: 100%;
  overflow: hidden;
}
.tbox-left {
  float: left;
  width: calc(50% - 2px);
  margin-right: 2px;
  overflow: hidden;
}
.tbox-right {
  float: right;
  width: calc(50% - 2px);
  margin-left: 2px;
  overflow: hidden;
}
.changeGzBox {
    position: relative;
    width: 900px;
    height: 700px;
    position: absolute;
    top: calc(50% - 350px);
    left: calc(50% - 450px);
    z-index: 99;
    background: rgb(236, 235, 235);
}
.changeGzBoxClose {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
}
</style>